<template>
  <div>
    <BaseModal 
      :cancel="false" 
      fullscreen 
      @onSubmit="linkKld"
      submitText="确 定"
      @onClose="onClose" 
      :show="show" 
      title="关联知识点">
      <div class="row-flex">
        <div class="all-kld">
        <span>全部知识点</span>
          <div class="kld-tree">
            <el-tree
              :data="knowledge"
              props="{id, parent, knowledge_name, children}"
              node-key="id"
              default-expand-all
              :expand-on-click-node="false">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span @click="searchKld(data.knowledge_name)">{{data.knowledge_name}} &nbsp;&nbsp;</span>
              </span>
            </el-tree>
          </div>
        </div>
        <div class="transfer" >
          <div>
            <el-input type="text" min="1" max="300" v-model="kldKw" placeholder="请输入知识点"></el-input>
            <el-button style="margin-left: 15px;" type="primary" @click="searchKld">查询</el-button>
          </div>
          <el-transfer v-model="selectedKlds" :data="klds"
            :titles="['知识点名——知识点路径', '已关联知识点名——知识点路径']"
            :button-texts="['删除', '添加']"
            @change="handleKldChange"
          >
            <span slot-scope="{ option }">{{ option.knowledge_name }} - {{ option.knowledge_path}}</span>
          </el-transfer>
        </div>
      </div>
    </BaseModal>
  </div>
</template>
<script>
import BaseModal from '@/modals/BaseModal';
import { kldModel } from '../api/models';
export default {
  mixins: [],
  components: {BaseModal},
  data() {
    return {
      kldKw: '',
      klds: [],
      knowledge: [],
      selectedKlds: []
    };
  },
  props: { 
    show: {
      type: Boolean,
      default: false
    },
    // selectedLabels: {
    //   type: [Array],
    //   default: null
    // }
  },
  watch: {
    // selectedLabels(value) {
    //   this.selectedKlds = value || [];
    // }
  },
  computed: {
    linkedKld () {
      return this.selectedKlds.length
    }
  },
  mounted() {
    this.getKlds();
  },
  methods: {
    getKlds() {
      kldModel.list(res => {
        this.knowledge = res.data
      })
    },
    searchKld(kw) {
      kldModel.search({
        'keyword': kw ? kw : this.kldKw
      }, res => {
        console.log('search klg', res)
        let hasId = this.klds.map(v => {return v.id})
        res.data.forEach(v => {
          if(hasId.includes(v.id)) return;
          v.key = v.id;
          v.label = v.knowledge_name;
          this.klds.push(v)
        })
      })
    },
    handleKldChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys);
      console.log(this.selectedKlds)
      this.$emit('onSelectKld', this.selectedKlds)
    },
    onClose() {
      this.$emit('onClose');
    },
    linkKld() {
      console.log('linkKld');
      this.onClose();
    }
  }
}
</script>

<style scoped>

.all-kld{
  width: 30%;
  border: 1px solid #000000;
  margin-right: 15px;
  padding: 10px;
}
.transfer{
  width: 60%;
}
.el-transfer-panel{
  width: 30%;
}
</style>